<template>
	<!-- 一条新闻 -->
	<div class="news" @click="$router.push(`/newsDetails?nid=${news.nid}`)">
		<div class="col">
			<!-- 新闻图片 -->
			<img :src="`/${news.img}`" v-lazy="`/${news.img}`">
		</div>
		<!-- 新闻标题和日期 -->
		<div class="col">
			<div>{{news.title}}</div>
			<div>{{news.news_time | date(Vue)}}</div>
		</div>
	</div>
</template>

<script>
export default {
		data() {
			return {
				Vue: this
			}
		},
		props:['news'],
		filters:{
			date(value,Vue){
				return Vue.moment(value).format('YYYY年MM月DD日')
			}
		}
	}
</script>

<style lang="scss" scoped>
.news {
	padding: 10px;
	display: flex;
	border-bottom: 1px solid #eeeeee;
	box-sizing: border-box;
	.col {
		img {
			width: 138px;
		}
		// 右侧部分的样式
		&:nth-child(2){
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			>div {
				// 新闻标题
				font-size: .9em;
				&:nth-child(1){
					color: #454c58;
				}
				// 日期
				&:nth-child(2){
					color: #afb1c6;
				}
			}
		}
		padding-right: 10px;
	}
}
</style>